<template>
	<view class="bg-gray1" style="min-height: 100vh;">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单详情</block>
		</cu-custom>
		<view class="order_info">
			<!-- 订单状态 -->
			<view class="card text-red text-bold font-30 flex">				
				<view class="cuIcon-send" v-if="orderInfo.order.status=='1'">
					<text class="margin-left-xs">待发货</text>
				</view>
				<view class="cuIcon-deliver" v-if="orderInfo.order.status=='2'">
					<text class="margin-left-xs">待收货</text>
				</view>
				<view class="cuIcon-evaluate" v-if="orderInfo.order.status=='3'">
					<text class="margin-left-xs">已完成</text>
				</view>
				<view class="cuIcon-roundclose" v-if="orderInfo.order.status=='-1'">
					<text class="margin-left-xs">已退款</text>
				</view>
				<view class="mLeft-20 text-gray3" v-if="orderInfo.order&&orderInfo.order.activityId&&orderInfo.refundAmount">
					-- 部分退款
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="flex align-center justify-between card" @click="jumpLogistics()">
				<view class="flex align-center ">
					<view class="cuIcon-roundcheckfill" style="color: #F5C13A;font-size: 40rpx;"></view>
					<view class="margin-left" v-if="orderInfo.address">
						<view class="text-bold font-30">{{orderInfo.address.addressDetail}} </view>
						<view class="flex align-center margin-top-xs">
							<view style="color: #465262;font-weight: 700">{{orderInfo.address.name}}</view>
							<view class="text-gray3 margin-left-xs">{{orderInfo.address.phone}}</view>
						</view>
					</view>
				</view>
				<view class="text-gray" v-if="orderInfo.order.status=='2' || orderInfo.order.status=='3'">
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="card ">
				<view class="flex">
					<image v-if="orderInfo.order && orderInfo.order.type == 6"
						src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/d59443eb-6784-4088-b20f-1ea8f3367012.jpg"
						mode="" style="width: 42rpx;height: 42rpx;border-radius: 10rpx;"></image>
					<image v-if="orderInfo.order && orderInfo.order.type == 2"
						src="https://fs-mix.oss-cn-beijing.aliyuncs.com/0526f3e5-06ad-44f2-ab08-3d7795f7a085.jpg"
						mode="" style="width: 42rpx;height: 42rpx;border-radius: 10rpx;"></image>
					<view class="margin-left-sm">{{orderInfo.shop.shopName}}</view>
				</view>
				<view class="flex align-center margin-top">
					<view class="" style="width: 25%;">
						<image
							:src="orderInfo.itemList&& orderInfo.itemList[0].picUrl ? orderInfo.itemList[0].picUrl : noPic"
							mode="widthFix" style="width: 100%;"></image>
					</view>
					<view class="margin-left-sm" style="flex: 1;width: 0;">
						<view class="text-black text-bold">{{orderInfo.itemList[0].spuName}}</view>
						<view class="flex-row-between margin-top-sm">
							<view class="text-price text-red"
								v-if="orderInfo.itemList&&orderInfo.itemList[0].salesPrice">
								{{orderInfo.itemList[0].salesPrice.toFixed(2)}}
							</view>
							<view class="text-gray" v-if="orderInfo.itemList">
								<text style="margin-right: 8rpx;">x</text>
								<text>{{orderInfo.itemList[0].quantity}}</text>
							</view>
						</view>
						<view class="margin-top-sm flex justify-end" v-if="orderInfo.itemList">
							<view v-if="orderInfo.itemList[0].status=='1'" class="cu-tag round line-red"
								style="line-height: 24rpx;">退款申请中</view>
							<view v-if="orderInfo.itemList[0].status=='11'" class="cu-tag round line-cyan"
								style="line-height: 24rpx;">同意退款</view>
							<view v-if="orderInfo.itemList[0].status=='12'" class="cu-tag round line-brown"
								style="line-height: 24rpx;">拒绝退款</view>
							<view v-if="orderInfo.itemList[0].status=='2'" class="cu-tag round line-red"
								style="line-height: 24rpx;">退货退款申请中</view>
							<view v-if="orderInfo.itemList[0].status=='21'" class="cu-tag round line-red"
								style="line-height: 24rpx;">同意退货退款/退货中</view>
							<view v-if="orderInfo.itemList[0].status=='22'" class="cu-tag round line-brown"
								style="line-height: 24rpx;">拒绝退货退款</view>
							<view v-if="orderInfo.itemList[0].status=='211'" class="cu-tag round line-cyan"
								style="line-height: 24rpx;">收到退货同意退款</view>
							<view v-if="orderInfo.itemList[0].status=='212'" class="cu-tag round line-brown"
								style="line-height: 24rpx;">收到退货拒绝退款</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="card bg-white">
				<view class="text-df">
					<text class="cuIcon-titles" :class="'text-'+theme.themeColor"></text>订单信息
				</view>
				<view class="padding-sm">
					<view class="flex-row-between">
						<view class="text1">订单金额：</view>
						<view class="font-26 text-gray text-price">
							{{orderItem.oPaymentPrice ? orderItem.oPaymentPrice.toFixed(2) : '0.00'}}
						</view>
					</view>
					<view class="flex-row-between margin-top-xs">
						<view class="text1">运费：</view>
						<view class="font-26 text-gray text-price">
							{{ orderInfo.order ? orderInfo.order.freightPrice : '0' }}
						</view>
					</view>
					<view class="flex-row-between margin-top-xs">
						<view class="text1">优惠抵扣金额：</view>
						<view class="font-26 text-gray text-price">
							{{orderItem.couponPrice ? orderItem.couponPrice.toFixed(2) : 0}}
						</view>
					</view>
					<view class="flex-row-between margin-top-xs" v-if="orderInfo.order&&orderInfo.order.paymentPrice">
						<view class="text1">支付金额：</view>
						<view class="font-28 text-red text-bold text-price">{{orderInfo.order.paymentPrice.toFixed(2)}}
						</view>
					</view>
					<view class="flex-row-between margin-top-xs" v-if="orderInfo.order&&orderInfo.order.activityId&&orderInfo.refundAmount">
						<view class="text1">退款金额：</view>
						<view class="font-28 text-red text-bold text-price">{{orderInfo.refundAmount.toFixed(2)}}
						</view>
					</view>
					<view class="flex-row-between margin-top-xl">
						<view class="text1">配送方式：</view>
						<view class="font-26 text-gray">快递配送</view>
					</view>
					<view class="flex-row-between margin-top-xs">
						<view class="text1">订单编号：</view>
						<view class="text-sm text-gray">
							<text>{{orderInfo.order.orderNo}}</text>
							<button class="cu-btn sm margin-left-sm"
								@click="copyData(orderInfo.order.orderNo)">复制</button>
						</view>
					</view>
					<view class="flex-row-between margin-top-xs">
						<view class="text1">创建时间：</view>
						<view class="font-26 text-gray">{{orderInfo.order.createTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	import util from 'utils/util'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				noPic: app.globalData.noPic,
				orderInfo: {},
				orderItem: {},
				id: null,
				showLogist: false, // 是否展示物流信息
			};
		},

		onShow() {
			app.initPage().then(res => {
				this.orderGet(this.id);
			})
		},

		onLoad(options) {
			this.id = options.id;
		},

		methods: {
			orderGet(id) {
				api.orderGet(id).then(res => {
					this.orderInfo = res.data;
					if (this.orderInfo && this.orderInfo.itemList && this.orderInfo.itemList.length) {
						this.orderItem = this.orderInfo.itemList[0]
						this.orderItem.marketPrice = Number(this.orderItem.marketPrice)
						this.orderItem.oPaymentPrice = this.orderItem.marketPrice * this.orderItem.quantity
						this.orderItem.couponPrice = this.orderItem.quantity * (this.orderItem.marketPrice - this
							.orderItem.salesPrice)
					}
				});
			},
			// 跳转物流
			jumpLogistics() {
				if (this.orderInfo.order.status == '2' || this.orderInfo.order.status == '3' ) {
					uni.navigateTo({
						url: '/pages/order/order-logistics/index?orderId=' + this.orderInfo.order.id 
					})
				}
			},
			//复制内容
			copyData(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					}
				});
			}
		}
	};
</script>
<style scoped>
	.order_info {
		padding: 0rpx 20rpx;
	}

	.order_info .card {
		background-color: #fff;
		padding: 20rpx 20rpx;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	.order_info .text1 {
		color: #aaaaaa;
		font-size: 26rpx;
	}
</style>